<script setup name="myMap">
	import {
		ref,
		onBeforeUpdate,
	} from "vue"

	import AMap from '@/utils/map.js';

	const props = defineProps({
		polyline: Array,
	})

	let myMap = null;
	const polylineData = ref([]);

	const getCenterPoint = () => {
		if (polylineData.value.length) {
			return polylineData.value[parseInt(polylineData.value.length / 2)];
		} else return '';
	};

	const initMap = () => {
		polylineData.value = props.polyline;

		myMap = new AMap();
		myMap.tileLayer();

		const centerPoint = getCenterPoint();
		myMap.moveToPoint(centerPoint.latitude, centerPoint.longitude);

		myMap.addPolyline(polylineData.value.map((it) => [it.latitude, it.longitude]));

		polylineData.value.forEach((it) => {
			const marker = myMap.addMarker(it.latitude, it.longitude, {
				zIndexOffset: -10,
			});
			// marker.bindPopup(it.checkName).openPopup();
			marker
				.bindTooltip(it.checkName || '-', {
					permanent: true,
					direction: 'top',
					offset: [0, -38],
				})
				.openTooltip();
		});
	};

	onBeforeUpdate(() => {
		initMap();
	});
</script>

<template>
	<view id="map" class="hj-map-leaflet"></view>
</template>

<style scoped lang="scss">
	#map {
		width: 100%;
		height: 100%;
	}
</style>